<script setup lang="ts">
import { ref, onActivated, unref } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { useStorage } from '@/hooks/web/useStorage'
import { useRouter } from 'vue-router'
import { editUsers } from '@/api/user'
import { useValidator } from '@/hooks/web/useValidator'
import { areaList } from '@vant/area-data'
import { getAddressJd, saveTask } from '@/api/task'
import moment from 'moment'
const appStore = useAppStore()
const { setStorage } = useStorage()
const { back } = useRouter()
const userInfo = ref(appStore.getUserInfo)

interface taskFormType {
  merPhone: string
  merName: string
  addressHead: string
  addressJd: string
  time: string
  taskActive: string
  taskActiveText: string
  isActive: string
  isActiveText: string
  isUrgent: string
  isUrgentText: string
  endDate: string
  startDate: string
  addressHeadCode: string
}
const searchForm = ref<taskFormType>({
  merPhone: '',
  merName: '',
  addressHead: '',
  time: '',
  addressJd: '',
  taskActive: '',
  taskActiveText: '',
  isActive: '',
  isActiveText: '',
  isUrgent: '',
  isUrgentText: '',
  endDate: '',
  startDate: '',
  addressHeadCode: ''
})
const { isMobilePhone, isEmail } = useValidator()

onActivated(() => {
  searchForm.value = {
    merPhone: '',
    merName: '',
    addressHead: '',
    time: '',
    addressJd: '',
    taskActive: '',
    taskActiveText: '',
    isActive: '',
    isActiveText: '',
    isUrgent: '',
    isUrgentText: '',
    endDate: '',
    startDate: '',
    addressHeadCode: ''
  }

  const getSearchForm = appStore.getSearchForm
  if (getSearchForm) {
    searchForm.value = getSearchForm
  }
})

const reset = () => {
  searchForm.value = {
    merPhone: '',
    merName: '',
    addressHead: '',
    time: '',
    addressJd: '',
    taskActive: '',
    taskActiveText: '',
    isActive: '',
    isActiveText: '',
    isUrgent: '',
    isUrgentText: '',
    endDate: '',
    startDate: '',
    addressHeadCode: ''
  }
  streetColumns.value = []
}
const onSubmit = (values: any) => {
  // let newTaskData = appStore.getPageData('newTask')
  // let myTaskDAta = appStore.getPageData('myTask')

  appStore.setPageData('newTask', null)
  appStore.setPageData('myTask', null)
  appStore.setSearchForm(unref(searchForm.value))
  onBack()
}
const onBack = () => {
  back()
}

const showAreaPicker = ref(false)
const showStreetPicker = ref(false)
const streetColumns = ref([])

const confirmArea = (val: any) => {
  console.log(val)
  showAreaPicker.value = false
  searchForm.value.addressHead = val.selectedOptions
    .map((e: any) => {
      return e.text
    })
    .toString()
  searchForm.value.addressHeadCode = val.selectedValues[2]
  getAddressJd(val.selectedValues[2]).then((res) => {
    streetColumns.value = res.data
    showStreetPicker.value = true
  })
}

const handleShowStreetPicker = () => {
  if (streetColumns.value.length > 0) {
    showStreetPicker.value = true
  } else {
    showAreaPicker.value = true
  }
}
const confirmStreet = (val: any) => {
  console.log(val)
  showStreetPicker.value = false
  searchForm.value.addressJd = val.selectedOptions[0].name
}

const showTimePicker = ref(false)
const startDate = ref<string[]>([])
const endDate = ref<string[]>([])
startDate.value = moment().format('YYYY-MM-DD').split('-')
endDate.value = moment().format('YYYY-MM-DD').split('-')
const confirmTime = () => {
  showTimePicker.value = false
  const date = `${startDate.value.toString().replace(/,/g, '-')}~${endDate.value
    .toString()
    .replace(/,/g, '-')} `
  searchForm.value.time = date
  searchForm.value.startDate = moment(startDate.value.toString().replace(/,/g, '/')).format(
    'YYYY-MM-DD'
  )
  searchForm.value.endDate = moment(endDate.value.toString().replace(/,/g, '/')).format(
    'YYYY-MM-DD'
  )
}

const taskActive = ref([])
const taskActiveList = ref([
  {
    text: '新客户',
    value: '0'
  },
  {
    text: '待回访',
    value: '1'
  },
  {
    text: '可上门',
    value: '4'
  },
  {
    text: '已上门',
    value: '5'
  },
  {
    text: '无意向',
    value: '6'
  },
  {
    text: '未接通',
    value: '3'
  }
])
const showTaskActivePicker = ref(false)
const confirmTaskActive = (val: any) => {
  console.log(val)
  const select = val.selectedOptions[0]
  searchForm.value.taskActive = select.value
  searchForm.value.taskActiveText = select.text
  showTaskActivePicker.value = false
}

const isActivePickerShow = ref(false)
const isActiveList = [
  {
    text: '未成交',
    value: '0'
  },
  {
    text: '待成交',
    value: '1'
  },
  {
    text: '已成交',
    value: '2'
  },
  {
    text: '需注销',
    value: '3'
  }
]
const isActive = ref([])
const confirmIsActive = (val: any) => {
  const select = val.selectedOptions[0]
  searchForm.value.isActive = select.value
  searchForm.value.isActiveText = select.text
  isActivePickerShow.value = false
}

const isUrgent = ref([])
const isUrgentPickerShow = ref(false)
const isUrgentList = [
  {
    text: '普通',
    value: '0'
  },
  {
    text: '加急',
    value: '1'
  },
  {
    text: '当日加急',
    value: '2'
  }
]
const confirmIsUrgent = (val: any) => {
  const select = val.selectedOptions[0]
  searchForm.value.isUrgent = select.value
  searchForm.value.isUrgentText = select.text
  isUrgentPickerShow.value = false
}
</script>

<template>
  <van-nav-bar title="查询" fixed placeholder left-arrow @click-left="onBack"> </van-nav-bar>
  <div class="wrapper">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="searchForm.merName" name="merName" label="姓名" />
        <van-field v-model="searchForm.merPhone" name="merPhone" label="电话" />
        <van-field
          v-model="searchForm.addressHead"
          name="addressHead"
          label="省市区"
          readonly
          is-link
          @click="showAreaPicker = true"
        />
        <van-popup v-model:show="showAreaPicker" position="bottom">
          <van-area
            title="省市区"
            :area-list="areaList"
            @cancel="showAreaPicker = false"
            @confirm="confirmArea"
          />
        </van-popup>
        <van-field
          v-model="searchForm.addressJd"
          name="addressJd"
          label="街道"
          is-link
          readonly
          @click="handleShowStreetPicker"
        />
        <van-popup v-model:show="showStreetPicker" position="bottom">
          <van-picker
            title="街道"
            :columns="[streetColumns]"
            :columns-field-names="{
              text: 'name',
              value: 'code'
            }"
            @cancel="showStreetPicker = false"
            @confirm="confirmStreet"
          />
        </van-popup>

        <van-field
          v-model="searchForm.taskActiveText"
          name="taskActiveText"
          label="任务状态"
          readonly
          is-link
          @click="showTaskActivePicker = true"
        />
        <van-popup v-model:show="showTaskActivePicker" position="bottom">
          <van-picker
            v-model="taskActive"
            title="任务状态"
            :columns="[taskActiveList]"
            @cancel="showTaskActivePicker = false"
            @confirm="confirmTaskActive"
          />
        </van-popup>

        <van-field
          v-model="searchForm.isActiveText"
          readonly
          name="isActiveText"
          is-link
          label="客户状态"
          @click="isActivePickerShow = true"
        />
        <van-popup v-model:show="isActivePickerShow" position="bottom">
          <van-picker
            v-model="isActive"
            title="客户状态"
            :columns="[isActiveList]"
            @cancel="isActivePickerShow = false"
            @confirm="confirmIsActive"
          />
        </van-popup>
        <van-field
          v-model="searchForm.isUrgentText"
          readonly
          is-link
          name="isUrgentText"
          @click="isUrgentPickerShow = true"
          label="是否加急"
        />
        <van-popup v-model:show="isUrgentPickerShow" position="bottom">
          <van-picker
            v-model="isUrgent"
            title="是否加急"
            :columns="[isUrgentList]"
            @cancel="isUrgentPickerShow = false"
            @confirm="confirmIsUrgent"
          />
        </van-popup>
        <van-field
          v-model="searchForm.time"
          name="startDate"
          label="分配时间"
          readonly
          is-link
          @click="showTimePicker = true"
        />
        <van-popup v-model:show="showTimePicker" position="bottom">
          <van-picker-group
            title="分配时间"
            :tabs="['开始日期', '结束日期']"
            @confirm="confirmTime"
            @cancel="showTimePicker = false"
          >
            <van-date-picker v-model="startDate" />
            <van-date-picker v-model="endDate" />
          </van-picker-group>
        </van-popup>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 查询 </van-button>
        <van-button round block @click="reset" style="margin-top: 8px"> 重置 </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="less" scoped>
.wrapper {
  padding: 16px 0;
}
.btnBox {
  padding: 32px 16px;
}
</style>
